// src/pages/EnterpriseOverview.tsx
import React from "react";
import {
  Box,
  Grid,
  Typography,
  Card,
  CardContent,
  CssBaseline,
  ThemeProvider,
} from "@mui/material";
import {
  RadarChart,
  PolarGrid,
  PolarAngleAxis,
  PolarRadiusAxis,
  Radar,
  Legend,
  BarChart,
  Bar,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  LineChart,
  Line,
} from "recharts";
import theme from "../themes/theme "; // 你的自定义深色主题路径

const radarData = [
  { domain: "数据治理", score: 75, benchmark: 90 },
  { domain: "技术架构", score: 65, benchmark: 85 },
  { domain: "安全合规", score: 80, benchmark: 95 },
  { domain: "业务协同", score: 70, benchmark: 88 },
  { domain: "智能分析", score: 60, benchmark: 92 },
];

const barData = [
  { name: "Q1", 企业: 80, 行业平均: 70 },
  { name: "Q2", 企业: 85, 行业平均: 75 },
  { name: "Q3", 企业: 90, 行业平均: 78 },
  { name: "Q4", 企业: 88, 行业平均: 80 },
];

const lineData = [
  { name: "2019", 能力指数: 60 },
  { name: "2020", 能力指数: 70 },
  { name: "2021", 能力指数: 78 },
  { name: "2022", 能力指数: 85 },
  { name: "2023", 能力指数: 89 },
];

const EnterpriseOverview: React.FC = () => {
  return (
    <ThemeProvider theme={theme}>
      <CssBaseline />
      <Box sx={{ p: 4 }}>
        <Typography variant="h4" gutterBottom color="primary">
          企业级数智化能力总评
        </Typography>
        <Typography variant="body1" color="text.secondary" sx={{ mb: 4 }}>
          本页面展示企业在各项数智化能力方面的整体表现，包括差距分析雷达图、能力发展趋势与行业对比分析。
        </Typography>

        <Grid container spacing={4}>
          {/* 差距分析雷达图 */}
          <Grid item xs={12} md={6}>
            <Card>
              <CardContent>
                <Typography variant="h6" gutterBottom>
                  差距分析雷达图
                </Typography>
                <RadarChart
                  cx="50%"
                  cy="50%"
                  outerRadius="80%"
                  width={400}
                  height={300}
                  data={radarData}
                >
                  <PolarGrid />
                  <PolarAngleAxis dataKey="domain" />
                  <PolarRadiusAxis />
                  <Radar
                    name="企业得分"
                    dataKey="score"
                    stroke="#8884d8"
                    fill="#8884d8"
                    fillOpacity={0.6}
                  />
                  <Radar
                    name="行业标杆"
                    dataKey="benchmark"
                    stroke="#82ca9d"
                    fill="#82ca9d"
                    fillOpacity={0.4}
                  />
                  <Legend />
                </RadarChart>
              </CardContent>
            </Card>
          </Grid>

          {/* 柱状图：行业对比 */}
          <Grid item xs={12} md={6}>
            <Card>
              <CardContent>
                <Typography variant="h6" gutterBottom>
                  行业对比分析
                </Typography>
                <BarChart
                  width={400}
                  height={300}
                  data={barData}
                  margin={{ top: 10, right: 30, left: 0, bottom: 0 }}
                >
                  <CartesianGrid strokeDasharray="3 3" />
                  <XAxis dataKey="name" />
                  <YAxis />
                  <Tooltip />
                  <Legend />
                  <Bar dataKey="企业" fill="#8884d8" />
                  <Bar dataKey="行业平均" fill="#82ca9d" />
                </BarChart>
              </CardContent>
            </Card>
          </Grid>

          {/* 折线图：发展趋势 */}
          <Grid item xs={12}>
            <Card>
              <CardContent>
                <Typography variant="h6" gutterBottom>
                  数智化能力发展趋势
                </Typography>
                <LineChart
                  width={800}
                  height={300}
                  data={lineData}
                  margin={{ top: 10, right: 30, left: 0, bottom: 0 }}
                >
                  <CartesianGrid strokeDasharray="3 3" />
                  <XAxis dataKey="name" />
                  <YAxis />
                  <Tooltip />
                  <Line
                    type="monotone"
                    dataKey="能力指数"
                    stroke="#8884d8"
                    strokeWidth={2}
                  />
                </LineChart>
              </CardContent>
            </Card>
          </Grid>
        </Grid>
      </Box>
    </ThemeProvider>
  );
};

export default EnterpriseOverview;
